<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="./js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 300px;
				border: 1px solid #ccc;
				overflow: hidden;
			}
			.box .boxUl{
				width: 400%;
				height: 300px;
			}
			.box .boxUl li{
				width: 25%;
				height: 300px;
				float: left;
			}
			.box .boxUl li:nth-of-type(1){
				background: salmon;
			}
			.box .boxUl li:nth-of-type(2){
				background: firebrick;
			}
			.box .boxUl li:nth-of-type(3){
				background: aqua;
			}
			.box .boxUl li:nth-of-type(4){
				background: hotpink;
			}
			ul li{
				list-style: none;
			}
			.boxAll{
				margin-left: 100px;
			}
			.boxAll li{
				width: 20px;
				height: 20px;
				border: 2px solid #ccc;
				float: left;
				margin-right: 30px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="boxUl">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<ul class="boxAll">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<script type="text/javascript">
			
		$(".boxAll").find("li").click(function(){
				var index=$(this).index();
				$(".boxUl").stop().animate({
					"marginLeft":-index*100+"%"
				},300)
			})
		</script>
	</body>
</html>
